<template>
  <div class="mutualattention">
    <!-- 顶部导航栏 -->
    <head-nav-bar>
      <template #left>
        <div class="head_name" @click="back">
          <img class="return" src="../../images/return.png" alt="" />
          <span class="return_">返回</span>
        </div>
      </template>
      <template #center>
        <router-link
          v-for="(item, index) in list"
          :key="index"
          :to="item.link"
          :class="item.classs"
          @click="barClick(index)"
        >
          <!-- <span :class="{ action: currentIndex == index }"
            >{{ item.name }}
          </span> -->
          <span>{{ item.name }} </span>
        </router-link>
      </template>
    </head-nav-bar><div>

    </div>
    <!-- 搜索用户 -->

    <router-view></router-view>
  </div>
</template>
<script>
import HeadNavBar from "../../../components/HeadNavBar";
export default {
  props: {},
  created() {},
  sockets: {
    receiveMsg(data) {
      console.log(data);
      let datas = this.$store.state.userinfo.userList;
      // console.log(datas);
      var flag = true;
      if (datas.length === 0) {
        this.$store.commit("setuserList", data);
      } else {
        for (let i = 0; i < datas.length; i++) {
          // console.log(datas[i]);
          if (datas[i].userid === data.userid) {
            datas[i].content = data.content;
            // console.log("第二次发");
            flag = false;
            break;
          }
        }
        if (flag === true) {
          this.$store.commit("setuserList", data);
          // console.log("第一次发");
        }
      }
    },
  },
  data() {
    return {
      currentIndex: 0,
      list: [
        {
          link: "/mutualattention",
          name: "互相关注",
          classs: "head_name2"
        },
        {
          link: "/Follow",
          name: "关注",
          classs: "head_name3"
        },
        {
          link: "/fan",
          name: "粉丝",
          classs: "head_name4"
        }
      ]
    };
  },
  methods: {
    barClick(index) {
      this.currentIndex = index;
    },
    back() {
      this.$router.push("/admin") 
    }
  },
  watch: {},
  components: {
    HeadNavBar
  }
};
</script>
<style scoped>
a {
  text-decoration: none;
  color: rgb(212, 212, 212);
}
.mutualattention {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f3f3f3;
}
.head_name {
  position: absolute;
  height: 25px;
  width: 60px;
  line-height: 25px;
}
.return {
  position: absolute;
  top: 2px;
  height: 21px;
  width: 21px;
}
.return_ {
  position: absolute;
  top: 0;
  left: 22px;
  height: 25px;
  line-height: 25px;
}
.asdf {
  height: 40px;
  width: 80px;
}
.head_name2 {
  position: absolute;
  left: 25%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.head_name3 {
  position: absolute;
  left: 50%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.head_name4 {
  position: absolute;
  left: 67%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.action {
  border-bottom: 1px solid #00aeff;
}
</style>
